<template>
    <el-dialog v-model="show" title="一键平账" width="35%" align-center @close="handleClose">
        <el-descriptions :column="5" direction="vertical">
            <el-descriptions-item label="收款方名称">{{ props.initList.collectName }}</el-descriptions-item>
            <el-descriptions-item label="摘要">
                {{ props.summaryType.filter((item: any) => item.value == props.initList.summary)[0].label }}
            </el-descriptions-item>
            <el-descriptions-item label="总金额">{{ props.initList.totalAmount }}</el-descriptions-item>
            <el-descriptions-item label="已付款金额">{{ props.initList.paidAlready }}</el-descriptions-item>
            <el-descriptions-item label="待付款金额">{{ Number(props.initList.reconciliationAmount) -
                Number(props.initList.paidAlready) }}</el-descriptions-item>
        </el-descriptions>

        <div style="color: #F76557; text-align: center; margin-top: 20px;">
            平账后，此订单后续的待付款金额将全部抵消，请慎重操作
        </div>


        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" v-loading="loading" @click="handleSubmit">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { balanceAllApi } from '@/api/sj/financialManagement/accountsPayable'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'summaryType']);
const emits = defineEmits(['submit', 'close']);

const show = ref(false);
const loading = ref(false);

watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

const handleSubmit = async () => {
    loading.value = true;
    try {
        const { code } = await balanceAllApi(props.initList.id)
        if (code == 200) {
            proxy?.$modal.msgSuccess('操作成功');
            emits('submit', true);
            loading.value = false;
            handleClose();
        }
    } catch (error) {
        loading.value = false;
    }
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped></style>